<template>
  <el-dialog
    v-model="FindFriendDialogData.isVisible"
    :close-on-click-modal="false"
    width="800"
  >
    <el-row justify="center" align="middle">
      <el-col :span="8" :offset="3">
        <el-button-group>
          <el-button type="primary" @click="isShow = true">好友查询</el-button>
          <el-button type="primary" @click="isShow = false">好友请求</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!-- 好友查询 -->
    <div v-show="isShow">
      <el-row class="mg-tb-20">
        <el-col :span="6" :offset="8"
          ><el-input placeholder="Please input"
        /></el-col>
        <el-col :span="6"><el-button type="primary">查询</el-button></el-col>
      </el-row>
      <el-table :data="tableData" class="flex-lr-center" :show-header="false">
        <el-table-column prop="avatar" label="头像" width="100">
          <template #default="scope">
            <el-avatar shape="square" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="昵称" width="100">
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="150">
          <template #default="scope">
            <el-button type="success" @click="innerVisible = true">请求添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加请求编辑 -->
    <el-dialog
      v-model="innerVisible"
      width="300"
      append-to-body
      class="flex-tblr-center"
    >
      <div class="fill flex-tblr-col-justify">
      <div class="avatar">
        <el-image
          style="width: 80px; height: 80px"
          class="wh-100-percent"
          src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
          fit="fill"
        ></el-image>
      </div>
      <h3>
        昵称
      </h3>
       <el-input class="mg-tb-10"
    v-model="textarea"
    style="max-width: 240px;"
    :rows="2"
    type="textarea"
    placeholder="好友添加备注"
  />
      <el-button type="primary">确认发送</el-button>
    </div>
    </el-dialog>

    <!-- 好友请求列表 -->
    <div class="mg-tb-20" v-show="!isShow">
      <el-table :data="tableData" class="flex-lr-center" :show-header="false">
        <el-table-column prop="avatar" label="头像" width="100">
          <template #default="scope">
            <el-avatar shape="square" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="昵称" width="100">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          show-overflow-tooltip
          width="180"
        >
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="150">
          <template #default="scope">
            <el-button type="success">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="FindFriendDialog">
import { defineProps, ref } from "vue";
defineProps(["FindFriendDialogData"]);
const tableData = [
  {
    avatar:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    remark: "测试备注都看见分厘卡圣诞节分厘卡即使灯笼裤飞机",
    name: "Tom",
  },
  {
    avatar:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    remark: "测试备注都看见分厘卡圣诞节分厘卡即使灯笼裤飞机",
    name: "Tom",
  },
];
let isShow = ref(true);
let innerVisible=ref(false);
</script>

<style scoped>
</style>